<template>
<div class="f-tag-list">
    <el-tabs
        v-model="activePath"
        type="card"
        class="demo-tabs"
        @tab-remove="removeTab"
        @tab-change="clickTab"
    >
        <el-tab-pane
            v-for="item in tagListData"
            :key="item.path"
            :label="item.title"
            :name="item.path"
            :closable="item.path != '/'"
            @click="clickTab(item.path)"
        >
        </el-tab-pane>
    </el-tabs>
    <el-dropdown class="dropdown" @command="handleCommand">
        <span class="el-dropdown-link">
            <el-icon><ArrowDown /></el-icon>
        </span>
        <template #dropdown>
            <el-dropdown-menu>
                <el-dropdown-item command="closeOther">关闭其他</el-dropdown-item>
                <el-dropdown-item command="closeAll">全部关闭</el-dropdown-item>
            </el-dropdown-menu>
        </template>
    </el-dropdown>
</div>
</template>
<script setup>
import { ref, computed } from 'vue'
import { useStore } from 'vuex'
import { onBeforeRouteUpdate, useRoute, useRouter } from 'vue-router'

const store = useStore()
const route = useRoute()
const router = useRouter()

const { tagListData } = useInitTagList()
const activePath = ref(route.path)


onBeforeRouteUpdate((to, from) => {
    store.commit("addTag", {
        title: to.meta.title,
        path: to.path
    })
    activePath.value = to.path
})
// 删除标签
const removeTab = (targetPath) => {
  const tabs = tagListData.value
  let activePathValue = activePath.value
  if (activePathValue === targetPath) {
    tabs.forEach((tab, index) => {
      if (tab.path === targetPath) {
        const nextTab = tabs[index + 1] || tabs[index - 1]
        if (nextTab) {
          activePathValue = nextTab.path
        }
      }
    })
  }
  activePath.value = activePathValue
  store.commit("removeTag", targetPath)
  router.push(activePath.value)
}
// 跳转标签
const clickTab = (targetPath) => {
    router.push(targetPath)
}

// 初始化tagList
function useInitTagList() {
    store.commit("initTagList")
    const tagListData = computed(() => store.state.tagList)

    // 添加标签页
    store.commit("addTag", {
        title: route.meta.title,
        path: route.path
    })

    return {
        tagListData
    }
}

// tab导航栏下拉选中
const handleCommand = (command) => {
    switch (command) {
        case "closeOther":
            store.commit("clearOtherTag", route.path)
            break;
        case "closeAll":
            store.commit("clearAllTag")
            router.push('/')
            break;
        default:
            break;
    }
}
</script>
<style lang="scss" scoped>
.f-tag-list {
    display: flex;
    justify-content: space-around;
    align-items: center;
    background: #f3f4f6;
    z-index: 100;
    padding: 0 2px;
    .demo-tabs {
        width: 97.5%;
    }
    .dropdown {
        width: 30px;
        height: 32px;
        display: flex;
        justify-content: center;
        align-items: center;
        background: #fff;
        border-radius: 8px;
        margin-right: 6px;
    }
}
// 改变标签导航栏高度，去除外边距和边框
:deep(.el-tabs__header) {
    height: 44px;
    margin: 0;
    border: none;
}
// 改变每个tab的样式
:deep(.el-tabs__item) {
    height: 32px;
    background: #fff;
    border-radius: 4px;
    border: none !important;
    margin: 6px 4px;
}
// 去除全部tab的边框
:deep(.el-tabs__nav) {
    border: none !important;
}
// 改变第一个tab的margin-left
:deep(.el-tabs--card>.el-tabs__header .el-tabs__item:first-child) {
    margin-left: 10px;
}
// 去除鼠标悬浮时出现黑白边框影响美观
:deep(.el-tooltip__trigger:focus) {
  outline: none;
}
</style>